event delegation [TIL] 프론트엔드 Day 20 이벤트 우리는 DOM Element에 addEventListener를 사용해 특정 이벤트가 발생할 때, 어떻게 처리할 것인지 이벤트 핸들러를 등록할 수 있다. 만약 핸들러가 등록된 element에 이벤트가 발생하면, 브라우저는 이벤트에 관련된 세부 내용들을 Event Object에 넣어 핸들러에 전달한다. 이벤트 페이즈 DOM tree의 최상위 요소부터 이벤트가 발생한 target eleme... event delegationJavaScriptTILEventEvent [JS30] -25) Event Capture, Bubbling, Propagation and Once Bubbling 상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다. Capturing capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,three 순으로 출력된다. Once를 true로 설정하면 이벤트를 들고해 한번 호출한 후 해... oncestopPropagationcapturingbubblingevent delegationbubbling
[TIL] 프론트엔드 Day 20 이벤트 우리는 DOM Element에 addEventListener를 사용해 특정 이벤트가 발생할 때, 어떻게 처리할 것인지 이벤트 핸들러를 등록할 수 있다. 만약 핸들러가 등록된 element에 이벤트가 발생하면, 브라우저는 이벤트에 관련된 세부 내용들을 Event Object에 넣어 핸들러에 전달한다. 이벤트 페이즈 DOM tree의 최상위 요소부터 이벤트가 발생한 target eleme... event delegationJavaScriptTILEventEvent [JS30] -25) Event Capture, Bubbling, Propagation and Once Bubbling 상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다. Capturing capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,three 순으로 출력된다. Once를 true로 설정하면 이벤트를 들고해 한번 호출한 후 해... oncestopPropagationcapturingbubblingevent delegationbubbling